<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="images/Favicon.png">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/flatpickr.min.css">
    <link rel="stylesheet" type="text/css" href="css/fontello.css">
    <link rel="stylesheet" type="text/css" href="css/fontello-codes.css">
    <link rel="stylesheet" type="text/css" href="css/thumbs-embedded.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <link rel="stylesheet" type="text/css" href="css/color.css">
    <title>头部栏</title>

</head>
<style>
    nav {
        margin-top: -5px;
    }
</style>
<script>

</script>

<body>
<header>
    <div class="top_bar">
        <div class="container">
            <div class="top_header_content">
                <div class="menu_logo" id="1">
                    <a href="#" title="" class="menu" @click="showLeftMenu()">
                        <i class="icon-menu"></i>
                    </a>
                    <a href="#" title="" class="logo">
                        <img src="images/logo2.png" alt="">
                    </a>
                </div>
                <!--menu_logo end-->
                <div class="btm_bar">
                    <div class="container">
                        <div class="btm_bar_content">
                            <nav>
                                <ul>
                                    <li><a href="index.html" target="_top" title="">主页</a></li>
                                    <li><a href="Browse_Categories.html" target="_top" title="">分类</a></li>
                                    <li><a href="Search_Page.html" target="_top" title="">搜索</a></li>
                                    <!-- <li><a href="#" title="">排行榜</a></li> -->
                                </ul>
                            </nav>
                            <!--navigation end-->
                            <ul class="shr_links">
                                <li>
                                    <h3>Go to : </h3>
                                </li>
                                <li>
                                    <button data-toggle="tooltip" data-placement="top" title="Like">
                                        <i class="icon-like"></i>
                                    </button>
                                </li>
                                <li>
                                    <button onclick="history()" data-toggle="tooltip" data-placement="top"
                                            title="Watch later">
                                        <i class="icon-watch_later"></i>
                                    </button>
                                </li>
                                <li>
                                    <button onclick="history()" data-toggle="tooltip" data-placement="top"
                                            title="History">
                                        <i class="icon-history"></i>
                                    </button>
                                </li>
                            </ul>
                            <!--shr_links end-->
                            <!-- <div class="clearfix"></div> -->
                        </div>
                        <!--btm_bar_content end-->
                    </div>
                </div>
                <!--btm_bar end-->
                <div class="search_form">
                    <form>
                        <input type="text" name="search" placeholder="">
                        <button type="submit">
                            <i class="icon-search"></i>
                        </button>
                    </form>
                </div>
                <!--search_form end-->
                <ul class="controls-lv">
                    <li>
                        <a href="#" title=""><i class="icon-message"></i></a>
                    </li>
                    <li>
                        <a href="#" title=""><i class="icon-notification"></i></a>
                    </li>
                    <li class="user-log" @click="showMenu()">
                        <div class="user-ac-img">
                            <img src="images/resources/user-img.png" alt="">
                        </div>
                        <div class="account-menu">
                            <h4>AZYRUSMAX <span class="usr-status">PRO</span></h4>
                            <div class="sd_menu">
                                <ul class="mm_menu">
                                    <li>
                                            <span>
                                                <i class="icon-user"></i>
                                            </span>
                                        <a href="#" title="">My Channel</a>
                                    </li>
                                    <li>
                                            <span>
                                                <i class="icon-paid_sub"></i>
                                            </span>
                                        <a href="#" title="">Paid subscriptions</a>
                                    </li>
                                    <li>
                                            <span>
                                                <i class="icon-settings"></i>
                                            </span>
                                        <a href="#" title="">Settings</a>
                                    </li>
                                    <li>
                                            <span>
                                                <i class="icon-logout"></i>
                                            </span>
                                        <a href="#" title="">Sign out</a>
                                    </li>
                                </ul>
                            </div>
                            <!--sd_menu end-->
                            <div class="sd_menu scnd">
                                <ul class="mm_menu">
                                    <li>
                                            <span>
                                                <i class="icon-light"></i>
                                            </span>
                                        <a href="#" title="">Dark Theme</a>
                                        <label class="switch">
                                            <input type="checkbox">
                                            <b class="slider round"></b>
                                        </label>
                                    </li>
                                    <li>
                                            <span>
                                                <i class="icon-language"></i>
                                            </span>
                                        <a href="#" title="">Language</a>
                                    </li>
                                    <li>
                                            <span>
                                                <i class="icon-feedback"></i>
                                            </span>
                                        <a href="#" title="">Send feedback</a>
                                    </li>
                                    <li>
                                            <span>
                                                <i class="icon-location"></i>
                                            </span>
                                        <a href="#" title="">India</a>
                                        <i class="icon-arrow_below"></i>
                                    </li>
                                </ul>
                            </div>
                            <!--sd_menu end-->
                            <div class="restricted-mode">
                                <h4>Restricted Mode</h4>
                                <label class="switch">
                                    <input type="checkbox" checked>
                                    <span class="slider round"></span>
                                </label>
                                <div class="clearfix"></div>
                            </div>
                            <!--restricted-more end-->
                        </div>
                    </li>
                    <li>
                        <a href="Upload_Video.html" title="" class="btn-default">投稿</a>
                    </li>
                </ul>
                <!--controls-lv end-->
                <div class="clearfix"></div>
            </div>
            <!--top_header_content end-->
        </div>
    </div>
    <!--header_content end-->
</header>
<div class="side_menu">
    <div class="form_dvv">
        <a href="#" title="" class="login_form_show">注册</a>
    </div>
    <div class="sd_menu">
        <ul class="mm_menu">
            <li>
                    <span>
                        <i class="icon-home"></i>
                    </span>
                <a href="#" title="">主页</a>
            </li>
            <li>
                    <span>
                        <i class="icon-fire"></i>
                    </span>
                <a href="#" title="">排行</a>
            </li>
            <li>
                    <span>
                        <i class="icon-subscriptions"></i>
                    </span>
                <a href="#" title="">订阅</a>
            </li>
        </ul>
    </div>
    <!--sd_menu end-->
    <div class="sd_menu">
        <h3>资源</h3>
        <ul class="mm_menu">
            <li>
                    <span>
                        <i class="icon-history"></i>
                    </span>
                <a href="History_Page.html" title="">历史</a>
            </li>
            <li>
                    <span>
                        <i class="icon-watch_later"></i>
                    </span>
                <a href="#" title="">稍后观看</a>
            </li>
            <li>
                    <span>
                        <i class="icon-purchased"></i>
                    </span>
                <a href="#" title="">购买</a>
            </li>
            <li>
                    <span>
                        <i class="icon-like"></i>
                    </span>
                <a href="#" title="">我的点赞</a>
            </li>
            <li>
                    <span>
                        <i class="icon-play_list"></i>
                    </span>
                <a href="#" title="">播放列表</a>
            </li>
        </ul>
    </div>
    <!--sd_menu end-->
    <div class="sd_menu subs_lst">
        <h3>订阅</h3>
        <ul class="mm_menu">
            <li>
                    <span class="usr_name">
                        <img src="images/resources/th1.png" alt="">
                    </span>
                <a href="#" title="">忠爷</a>
                <small>3</small>
            </li>
            <li>
                    <span class="usr_name">
                        <img src="images/resources/th2.png" alt="">
                    </span>
                <a href="#" title="">强爷</a>
                <small>6</small>
            </li>
            <li>
                    <span class="usr_name">
                        <img src="images/resources/th3.png" alt="">
                    </span>
                <a href="#" title="">彪爷</a>
                <small>2</small>
            </li>
            <li>
                    <span class="usr_name">
                        <img src="images/resources/th4.png" alt="">
                    </span>
                <a href="#" title="">辉爷</a>
                <small>11</small>
            </li>
            <li>
                    <span class="usr_name">
                        <img src="images/resources/th5.png" alt="">
                    </span>
                <a href="#" title="">东爷</a>
                <small>3</small>
            </li>
            <li>
                    <span class="usr_name">
                        <img src="images/resources/tx1.png" alt="">
                    </span>
                <a href="#" title="">勇爷</a>
                <small>20</small>
            </li>
            <li>
                    <span class="usr_name">
                        <img src="images/resources/sn.png" alt="">
                    </span>
                <a href="#" title="">耀爷</a>
                <small>20</small>
            </li>
            <li>
                    <span class="usr_name">
                        <img src="images/resources/tx2.png" alt="">
                    </span>
                <a href="#" title="">admin</a>
                <small>20</small>
            </li>
        </ul>
        <a href="#" title="" class="more-ch"><i class="icon-arrow_below"></i>更多</a>
    </div>
    <!--sd_menu end-->
    <div class="sd_menu">
        <ul class="mm_menu">
            <li>
                    <span>
                        <i class="icon-settings"></i>
                    </span>
                <a href="#" title="">设置</a>
            </li>
            <li>
                    <span>
                        <i class="icon-flag"></i>
                    </span>
                <a href="#" title="">反馈日志</a>
            </li>
            <li>
                    <span>
                        <i class="icon-logout"></i>
                    </span>
                <a href="#" title="">退出登录</a>
            </li>
        </ul>
    </div>
    <!--sd_menu end-->
    <div class="sd_menu m_linkz">
        <ul class="mm_menu">
            <li><a href="#">关于我们</a></li>
            <li><a href="#">社区规则</a></li>
            <li><a href="#">隐私</a></li>
            <li><a href="#">技术团队</a></li>
            <li><a href="#">博客</a></li>
            <li><a href="#">联系我们 </a></li>
            <li><a href="#">给我们投食</a></li>
            <li><a href="#">FAQ</a></li>
        </ul>
        <span>主题</span>
    </div>
    <!--sd_menu end-->
    <div class="sd_menu bb-0">
        <ul class="social_links">
            <li>
                <a href="#" title="">
                    <i class="icon-facebook-official"></i>
                </a>
            </li>
            <li>
                <a href="#" title="">
                    <i class="icon-twitter"></i>
                </a>
            </li>
            <li>
                <a href="#" title="">
                    <i class="icon-instagram"></i>
                </a>
            </li>
        </ul>
        <!--social_links end-->
    </div>
    <!--sd_menu end-->
    <div class="dd_menu"></div>
</div>
<!--header end-->
<script src="js/jquery.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/flatpickr.js"></script>
<script src="js/script.js"></script>
<script>
    $(".menu").on("click", function () {
        $(window.parent.document).find(".side_menu").toggleClass("active");
        return false;
    })
</script>

<script>

</script>

</body>

</html>
